<template>
  <div>
    <a-button @click="handleAdd"
              class="dg-base-btn">
      添加
    </a-button>
    <a-table bordered
             :data-source="defaultValue"
             :columns="instance.columns"
             :scroll="{ x: 'calc(700px + 50%)', y: 450 }"
             :pagination="false"
             v-bind="instance">
      <template :slot="item"
                slot-scope="text, record"
                v-for="(item, index) in instance.editArr">
        <editable-cell :text="text"
                       :key="'item' + index"
                       @change="onCellChange(record.key, item, $event)"
                       :ref="item + count + 'Ref'" />
      </template>

      <template slot="operation"
                slot-scope="text, record">
        <a href="javascript:;"
           @click="delClick(text, record)">删除</a>
      </template>
    </a-table>
  </div>
</template>
<script>
import EditableCell from './EditTableCell'
export default {
  props: {
    instance: Object,
  },
  components: {
    EditableCell,
  },
  data() {
    return {
      count: 1,
      defaultValue: [],
      key: null,
    }
  },
  watch: {
    // defaultValue(val) {
    //
    //   if (val) {
    //     this.count = val.length + 1
    //     this.key = val.length + 1
    //   }
    // },
    instance: {
      handler(nVal) {
        Object.assign(this, { ...nVal }) // 把传入的参数，融合到this中
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    onCellChange(key, dataIndex, value) {
      const defaultValue = [...this.defaultValue]
      const target = defaultValue.find((item) => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.defaultValue = defaultValue
        // 修改数据源的表格数据
        this.$emit('change', defaultValue)
      }
    },

    delClick(text, record) {
      this.defaultValue.forEach((item, key) => {
        if (item.key === record.key) {
          this.defaultValue.splice(key, 1)
        }
      })

      this.defaultValue.forEach((item, key) => {
        item.serialNo = key + 1
      })
      // this.$emit('rowDelClick', record)
    },
    handleAdd() {
      let { count, defaultValue, key } = this
      key = `${new Date()}` + count

      if (defaultValue === undefined) {
        defaultValue = []
      }
      if (defaultValue.length > 0) {
        count = defaultValue.length + 1
      }
      const newData = {
        serialNo: count,
        applicationNo: '',
        name: '',
        applicant: '',
        inventor: '',
        publicationNo: '',
        legalStatus: '',
        key: key,
      }
      // 修改数据源的表格数据
      this.defaultValue = [...defaultValue, newData]

      // this.$emit('valueChange', [...defaultValue, newData])
      this.$emit('change', [...defaultValue, newData])
      this.count = 1
      setTimeout(() => {
        this.instance.editArr.forEach((item) => {
          let str = item + this.count + 'Ref'
          this.$refs[str][0].editable = true
        })
      })
    },
  },
}
</script>
